<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            .h10 {
                height: 10px;
                background: #f0f0f0;
            }
            
            .h1 {
                height: 1px;
                margin-left: 15px;
                background: #f0f0f0;
            }
            
            .fr {
                float: right;
            }
            
            .hint {
                color: #666;
                font-size: 12px;
                margin-right: 5px;
            }
            
            .firstblock,
            .secondblock,
            .thirdblock {
                background-color: #fff;
            }
            
            .login {
                background-image: url(../image/my/personal_bkg.jpg);
                background-repeat: no-repeat;
                background-size: contain;
                position: relative;
            }
            
            .loginbg {
                width: 100%;
            }
            
            .login .personal_logo {
                position: absolute;
                top: 60px;
                width: 64px;
                height: 64px;
                left: 20px;
            }
            
            .person_arrow {
                position: absolute;
                height: 20px;
                right: 10px;
                top: 90px;
            }
            
            .login .userinfo {
                position: absolute;
                top: 60px;
                margin-left: 100px;
            }
            
            .login .userinfo .title {
                font-size: 20px;
                color: #fff;
            }
            
            .login .userinfo .subtitle {
                font-size: 14px;
                color: #fff;
                border: 1px solid #fff;
                display: inline-block;
                padding: 3px;
                border-radius: 4px;
                margin-top: 5px;
            }
            
            .item {
                height: 50px;
                line-height: 50px;
                padding-left: 15px;
                background-color: #fff;
            }
            
            .item_ico {
                float: left;
                width: 30px;
                padding: 10px 10px 10px 0;
            }
            
            .item_arrow {
                float: right;
                width: 16px;
                padding: 17px 15px 15px 0;
            }
            
            .item-hov {
                background-color: #E8E8E8;
            }
        </style>
    </head>

    <body>
        <div class="login open-win" win="person_info" login="true">
            <img src="../image/my/personal_bkg.jpg" class="loginbg">
            <img id="userAvatar" src="../image/my/profile_default.png" class="personal_logo">
            <div class="userinfo">
                <div id="userAccount" class="title">点击登录</div>
                <div id="userRegion" class="subtitle">常居地：未设置</div>
            </div>
            <img src="../image/my/personal_icon_arrow.png" class="person_arrow">
        </div>
        <div class="h10"></div>
        <div class="firstblock">
            <div class="item open-win" win="myorder" login="true">
                <img src="../image/my/my_order_user_icon_normal.png" alt="" class="item_ico">
                <span>我的订单</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
            <div class="h1"></div>
            <div class="item open-win" win="mygroupvolume" login="true">
                <img src="../image/my/my_coupon_user_icon_normal.png" class="item_ico">
                <span>我的团购券</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
        </div>
        <div class="h10"></div>
        <div class="secondblock">
            <div class="item open-win" win="myfavorite" login="true">
                <img src="../image/my/my_favorite_user_icon_normal.png" class="item_ico">
                <span>我的收藏</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
            <div class="h1"></div>
            <div class="item open-win" win="myhistory">
                <img src="../image/my/my_history_user_icon_normal.png" class="item_ico">
                <span>最近浏览</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
            <div class="h1"></div>
        </div>
        <div class="h10"></div>
        <div class="thirdblock">
            <div class="h1"></div>
            <div class="item open-win" win="setting">
                <img src="../image/my/my_setting_user_icon_normal.png" class="item_ico">
                <span>设置</span>
                <img src="../image/arrow.png" class="item_arrow">
            </div>
        </div>
        <div class="h10"></div>
        <div class="h10"></div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript">
        apiready = function() {
            fnReadyOpenWin();
            fnInit();
            fnInitEvent();

            fnUpdateUserInfo();
        };

        var userAvatar, userAccount, userRegion;

        function fnInit() {
            userAvatar = $api.byId('userAvatar');
            userAccount = $api.byId('userAccount');
            userRegion = $api.byId('userRegion');
        };

        function fnInitEvent() {
            api.addEventListener({
                name: 'setuserinfo'
            }, function(ret, err) {
                fnUpdateUserInfo();
            });

            api.addEventListener({
                name: 'logout'
            }, function(ret, err) {
                fnResetUserInfo();
            });
        };

        function fnUpdateUserInfo() {
            userAccount.innerHTML = $api.getStorage('account') || '点击登陆';
            var src = $api.getStorage('avatar') || '../image/my/profile_default.png';
            api.imageCache({
                url: src
            }, function(ret, err) {
                userAvatar.src = ret.url;
            });
            userRegion.innerHTML = '常居地：' + $api.getStorage('city') || '常居地：未设置';
        };

        function fnResetUserInfo() {
            userAccount.innerHTML = '点击登陆';
            userAvatar.src = '../image/my/profile_default.png';
            userRegion.innerHTML = '常居地：未设置'
        };
    </script>

</html>
